<template>
  <div>
    <!-- 主页面 -->
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-sticky :container="container">
        <van-nav-bar title="易洁家政"
      /></van-sticky>
    </div>

    <!-- 轮播图 -->
    <div class="swap">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="swipe in swipeData" :key="swipe.id">
          <img :src="swipe.url" alt="" srcset="" class="swipeImg" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 栏目菜单 -->
    <div class="menu">
      <van-grid :column-num="3">
        <van-grid-item
          v-for="(category, index) of categoryData"
          :key="category.id"
          :icon="category.icon"
          :text="category.name"
          @click="toShopcar(category.id, index)"
        />
      </van-grid>
    </div>

    <!-- 产品服务展示区域 -->
    <div class="product">
      <van-card
        v-for="product in productData"
        :key="product.id"
        :price="product.price + '.00'"
        :desc="product.description"
        :title="product.name"
        :thumb="product.photo"
      />
    </div>
    <div class="buttom" style="height: 50px"></div>

    
  </div>
</template>

<script>
import { get } from "@/http/axios";
import { mapActions, mapState} from "vuex";
export default {
  data() {
    return {
      // 栏目数据

      // 粘性布局参数
      container: null,

      //  轮播图
      swipeData: [],
    };
  },
  computed: {
    // 栏目数据
    ...mapState("category", ["categoryData"]),

    // 产品数据
    ...mapState("product", ["productData"]),
  },

  methods: {
    // 引入category vuex中的 getAllCategoryData方法
    ...mapActions("category", ["getAllCategoryData"]),

    // 引入product vuex中的 getAllProductData方法
    ...mapActions("product", ["getAllProductData"]),

    // 跳转购物车的方法
    toShopcar(categoryId, activeKey) {
      this.$router.push({
        path: "/shopcart",
        query: {
          categoryId,
          activeKey,
        },
      });
    },

    // 查询产品数据
    queryProduct() {
      const data = {
        page: 1,
        pageSize: 12,
        status: "正常",
      };
      this.getAllProductData(data);
    },

    // 查询栏目数据
    queryCategory() {
      const data = {
        page: 1,
        pageSize: 6,
      };
      // 调用vuex中的方法
      this.getAllCategoryData(data);
    },

    // 查询获得状态为正常的轮播图
    async querySwipeData() {
      const res = await get("/carousel/query", { status: "正常" });
      this.swipeData = res.data.data;
    },
  },
  mounted() {
    // // 粘性布局方法
    this.container = this.$refs.container;
  },
  created() {
    // 自动获取轮播图的数据
    this.querySwipeData();
    // 自动获得栏目数据
    this.queryCategory();
    // 自动获得所有产品数据
    this.queryProduct();
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item,
.my-swipe .van-swipe-item img {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  height: 200px;
  width: 100%;
}
</style>